import Button from "./components/Button";
import Dialog from "./components/Dialog";
import Icon from "./components/Icon";
import ProgressBar from "./components/ProgressBar";

const App = () => {
  const items = ['btn1', 'btn2', 'btn3']
  const items2 = [
    {id: 1, txt: 'btn1', icon: 'stopwatch'},
    {id: 2, txt: 'btn2', icon: 'stop'},
    {id: 3, txt: 'btn3', icon: 'sticky'},
  ]

  return ( <div>
    <Button
      size='sm' className='myBtn' cat='primary'
      icon='suit-heart-fill'
    >确认</Button>{' '}
    <Button cat='secondary'>取消</Button>{' '}
    <Button size='lg' cat='danger' style={{
      fontWeight: 'bold'
    }} id='delBtn' data-x={123}>删除</Button>{' '}
    <Icon name='trash3' />

    {
      items.map((str, index) =>
        <Button key={index} cat='primary'>
          {str}
        </Button>
      )
    }
    {
      items2.map((item) => (
        <Button
          key={item.id}
          cat='link'
          icon={item.icon}>
            {item.txt}
        </Button>
      ))
    }
    {
      [
        <b key='kljlkj'>hello</b>,
        <b key='23'>张三</b>,
        "!"
      ]
    }
    <ProgressBar value={33}/>
    <ProgressBar value={50} background='info' height={40}
      label='满意度'
    />
    <ProgressBar value={80} isStriped/>
    <Dialog  title='欢迎' onClose={() => console.log('关闭')}>
      <p>欢迎访问本站！</p>
    </Dialog>
  </div> );
}

export default App;